/**
 * Created by Toma on 2016/9/5.
 * 写个字儿咯~
 */

var WIDTH = Math.min(800, window.screen.width - 20),
    HEIGHT = WIDTH;
var isMouseDown = false,
    lastLoc = {},
    lastTimetamp = 0,
    lastLineWidth = -1,
    strokeColor = 'black';
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = WIDTH;
canvas.height = HEIGHT;
document.getElementById('cantroller').style.width = WIDTH + 'px';

// 绘制边框
function drawGrid() {
  ctx.save();
  ctx.strokeStyle = 'rgb(230,11,9)';

  // 外框
  ctx.beginPath();
  ctx.moveTo(3, 3);
  ctx.lineTo(WIDTH - 3, 3);
  ctx.lineTo(WIDTH - 3, HEIGHT - 3);
  ctx.lineTo(3, HEIGHT - 3);
  ctx.closePath();

  ctx.lineWidth = 6;
  ctx.stroke();

  // 内线
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(WIDTH, HEIGHT);
  ctx.moveTo(WIDTH, 0);
  ctx.lineTo(0, HEIGHT);
  ctx.moveTo(0, HEIGHT / 2);
  ctx.lineTo(WIDTH, HEIGHT / 2);
  ctx.moveTo(WIDTH / 2, 0);
  ctx.lineTo(WIDTH / 2, HEIGHT);

  ctx.lineWidth = 1;
  ctx.stroke();

  ctx.restore();
}

// 事件绑定
function eventHandle() {
  function beginStroke(x, y) {
    isMouseDown = true;
    lastLoc = winTocan(x, y);
    lastTimetamp = new Date().getTime();
  }

  function endStroke() {
    isMouseDown = false;
  }

  canvas.onmousedown = function (e) {
    e.preventDefault();
    beginStroke(e.clientX, e.clientY);
  };
  canvas.onmouseup = function (e) {
    e.preventDefault();
    endStroke()
  };
  canvas.onmouseout = function (e) {
    e.preventDefault();
    endStroke()
  };
  canvas.onmousemove = function (e) {
    e.preventDefault();
    if (isMouseDown)  drawContent(e.clientX, e.clientY);
  };

  // 手机
  canvas.addEventListener('touchstart', function (e) {
    e.preventDefault();
    var touch = e.touches[0];
    beginStroke(touch.pageX, touch.pageY);
  });
  canvas.addEventListener('touchmove', function (e) {
    e.preventDefault();
    var touch = e.touches[0];
    if (isMouseDown)  drawContent(touch.pageX, touch.pageY);
  });
  canvas.addEventListener('touchend', function (e) {
    e.preventDefault();
    endStroke()
  });


  // DOM 交互
  document.getElementById('clear_btn').onclick = function (e) {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    drawGrid();
  };

  [].forEach.call(document.getElementsByClassName('J_btn'), function (item) {
    item.onclick = function () {
      strokeColor = this.ownerDocument.defaultView.getComputedStyle(this, null).backgroundColor;
    }
  });
}

// 绘制内容
function drawContent(x, y) {
  var curLoc = winTocan(x, y);
  var curTimetamp = new Date().getTime();
  var s = calcDistance(curLoc, lastLoc);
  var t = curTimetamp - lastTimetamp;

  var lineWidth = calcLineWidth(t, s);

  ctx.beginPath();
  ctx.moveTo(lastLoc.x, lastLoc.y);
  ctx.lineTo(curLoc.x, curLoc.y);
  ctx.strokeStyle = strokeColor;
  ctx.lineWidth = lineWidth;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.stroke();

  lastLoc = curLoc;
  lastTimetamp = curTimetamp;
  lastLineWidth = lineWidth;
}

// 获取坐标
function winTocan(x, y) {
  var box = canvas.getBoundingClientRect();
  return {
    x: Math.round(x - box.left),
    y: Math.round(y - box.top)
  }
}

// 两点之间的距离公式
function calcDistance(sta, end) {
  return Math.sqrt(Math.pow(sta.x - end.x, 2) + Math.pow(sta.y - end.y, 2));
}

// 粗细问题
function calcLineWidth(t, s) {
  var v = s / t, resultLw;

  if (v <= 0.1) {
    resultLw = 30;
  } else if (v >= 10) {
    resultLw = 1;
  } else {
    resultLw = 30 - (v - 0.1) / (10 - 0.1) * (30 - 1);
  }

  if (lastLineWidth != -1) {
    return lastLineWidth * 3 / 4 + resultLw * 1 / 4;
  } else {
    return resultLw;
  }
}

window.addEventListener('load', function () {
  drawGrid();
  eventHandle();
});